<template>
    <div v-loading="loading" class="page flex flex-column">
        <!-- 搜索栏 -->
        <div class="toppage">
            <el-form size="small" :inline="true" :model="serachForm" class="demo-form-inline">
                <el-form-item class='ml10' label="区域名称">
                    <el-input v-model="serachForm.name" placeholder="模糊匹配"></el-input>
                </el-form-item>
                <el-form-item class='ml10'>
                    <el-button type="primary" @click="onSerach">查 询</el-button>
                    <el-button @click="onEmpty">重 置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 显示栏 -->
        <div class="bottompage flex flex-column">

            <div class="bottompage-table">
                <el-table @selection-change="tableSelectionChange" :stripe="true" height="100%" :data="tableData"
                    style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="opertime" label="日期" sortable width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="区域名称" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="区域地址">
                    </el-table-column>
                    <el-table-column prop="remark" label="备注">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button :disabled="!permissionInfo.update" type="primary" size="mini"
                                @click="operData(2, scope.row)">编 辑</el-button>
                            <el-button :disabled="!permissionInfo.delete" class="ml10" type="danger" size="mini"
                                @click="delOper(3, scope.row.id)">删
                                除</el-button>
                            <!-- <el-tag size="small" type="danger">成功</el-tag> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="bottompage-pagination mt10 flex flex-between flex--start">
                <div>
                    <el-button :disabled="!permissionInfo.add" size="small" @click="operData(1)" type="primary">新
                        增</el-button>
                    <el-button :disabled="!permissionInfo.delete" size="small" @click="delOper(1)"
                        type="danger">批量删除</el-button>
                    <el-button :disabled="!permissionInfo.delete" size="small" @click="delOper(2)" type="danger">清
                        空</el-button>
                </div>
                <div>
                    <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange"
                        :current-page="pageInfo.pageSize" :page-sizes="[10, 50, 100, 200, 300, 400, 500]"
                        :page-size="pageInfo.pageNum" layout="total, sizes, prev, pager, next, jumper"
                        :total="pageInfo.total">
                    </el-pagination>
                </div>

            </div>

        </div>

        <el-dialog :title="title" :before-close="handleClose" :visible.sync="dialogVisible" width="40%">
            <div>
                <el-form ref="operForm" :rules="rules" :model="operForm" label-width="80px">
                    <el-form-item prop="name" label="区域名称">
                        <el-input v-model="operForm.name" placeholder="区域名称"></el-input>
                    </el-form-item>
                    <el-form-item label="区域地址">
                        <el-input v-model="operForm.address" placeholder="区域地址"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="operForm.remark" placeholder="备注"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm()">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getOrigin, addUpdateOrigin, delOrigin } from '@/http/api/index'
const pageDefault = {
    pageSize: 1,
    pageNum: 10,
    total: 0
}
export default {
    data() {
        return {
            permissionInfo: {
                add: false,
                select: false,
                update: false,
                delete: false,
            },

            serachForm: {},
            operForm: {},

            loading: false,
            dialogVisible: false,
            dialogType: 1,
            title: "",

            rules: {
                name: [
                    { required: true, message: '请输入区域名称', trigger: 'blur' },
                    { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
                ],
                // address: [
                //     { required: true, message: '请输入区域地址', trigger: 'blur' },
                //     { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
                // ],

            },

            pageInfo: Object.assign(pageDefault),
            tableData: [],

            delIds: [],

        };
    },
    methods: {
        permissionCheck() {
            let permissionList = this.$store.getters.roleInfo.origin;
            Object.assign(this.permissionInfo, permissionList);
            return;
        },
        getData() {
            let data = Object.assign({}, this.serachForm, this.pageInfo);
            this.loading = true;
            getOrigin(data).then(res => {
                this.tableData = res.data;
                this.pageInfo.total = res.total;

                this.loading = false;
            }).catch(err => {
                this.loading = false;
                this.$message.error("网络有点小问题!");
            });
            return;
        },
        // 查询
        onSerach() {
            for (let k in this.serachForm) {
                if (!k) delete this.serachForm[k];
            }
            if (Object.keys(this.serachForm).length > 0) {
                this.getData();
            } else {
                this.$message.error("输先入查询的条件!");
            }
            return;
        },
        onEmpty() {
            this.serachForm = {};
            return;
        },
        // 批量删除
        tableSelectionChange(vals) {
            // 获取id
            let ids = [];
            vals.forEach(item => {
                ids.push(item.id);
            });
            this.delIds = ids;
            ids = null;
            return;
        },
        // 删除
        delOper(type, id) {
            let data;
            this.loading = true;
            if (type == 1) { // 批量删除
                if (this.delIds.length > 0) {
                    data = { type: 1, data: this.delIds };
                } else {
                    this.$message.error("请先勾选对应数据");
                }
            } else if (type == 2) { // 清空
                data = { type: 2 };
            } else if (type == 3) {  // 删除单个
                data = { type: 1, data: [id] };
            }
            if (data) {
                this.$confirm(
                    `是否删除`,
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        closeOnClickModal: false,
                        closeOnPressEscape: false
                    }
                )
                    .then(() => {
                        delOrigin(data).then(res => {
                            if (res.code == 200) {
                                this.getData();
                            } else {
                                this.loading = false;
                                this.$message.error("删除失败!");
                            }
                            return;
                        }).catch(err => {
                            console.error(err);
                            this.loading = false;
                            this.$message.error("网络有点小问题!");
                            return;
                        });

                    })
                    .catch(() => {
                        this.loading = false;
                        return false;
                    });

            } else {
                this.loading = false;
            }
            return;
        },
        handleClose() {
            this.resetForm();
            this.dialogVisible = false;
        },
        // 点击确认提交
        submitForm(formName = 'operForm') {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    let params;
                    if (this.dialogType == 1) {
                        params = [this.operForm];
                    } else {
                        params = this.operForm;
                    }
                    addUpdateOrigin(params).then(res => {
                        if (res.code == 200) {
                            this.$message.success("操作成功");
                            this.dialogVisible = false;
                            this.getData();
                        } else {
                            this.$message.success("操作失败");
                        }
                        this.loading = false;

                    }).catch(err => {
                        this.loading = false;
                        console.error(err);
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 刷新 rules
        resetForm(formName = 'operForm') {
            this.$refs[formName].resetFields();
        },
        // type 1：add  其他：update
        operData(type, data) {
            if (type == 1) {
                this.title = "新增";
                this.dialogType = 1;
                this.operForm = {};
            } else {
                this.title = "编辑";
                this.dialogType = 2;
                this.operForm = { ...data };
            }
            this.dialogVisible = true;

        },
        // 选显示条数
        pageSizeChange(val) {
            this.pageInfo.pageNum = val;
            this.getData();
            return;
        },
        // 选页
        pageCurrentChange(val) {
            this.pageInfo.pageSize = val;
            this.getData();
            return;
        }
    },
    mounted() {
        this.permissionCheck();
        if (this.permissionInfo.select) {
            this.getData();
        }
    }
}
</script>

 